<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Screen Record</title>
  <!-- <link rel="stylesheet" href="./css/index.css"> -->
  <style>
    #video {
      border: 1px solid #999;
      width: 98%;
      max-width: 860px;
    }

    .error {
      color: red;
    }

    .warn {
      color: orange;
    }

    .info {
      color: darkgreen;
    }
  </style>
  <script src="../newjs/newBD.js"></script>
</head>

<body>
  <a href="demo1.html">demo1.html</a>
  <p>This example shows you the contents of the selected part of your display.
    Click the Start Capture button to begin.</p>
  <p><button id="start">Start Capture</button>&nbsp;<button id="stop">Stop Capture</button></p>
  <video id="video" autoplay></video>
  <br>
  <strong>Log:</strong>
  <br>
  <pre id="log"></pre>
  <!-- <script src="./js/index.js"></script> -->
</body>


<script>
  const videoElem = document.getElementById("video");
  const logElem = document.getElementById("log");
  const startElem = document.getElementById("start");
  const stopElem = document.getElementById("stop");
  // Options for getDisplayMedia()
  const displayMediaOptions = {
    video: {
      cursor: "never"
    },
    audio: true
  };
  // Set event listeners for the start and stop buttons
  startElem.addEventListener("click", function (evt) {
    startCapture();
  }, false);
  stopElem.addEventListener("click", function (evt) {
    stopCapture();
  }, false);
  console.log = msg => logElem.innerHTML += `${msg}<br>`;
  console.error = msg => logElem.innerHTML += `<span class="error">${msg}</span><br>`;
  console.warn = msg => logElem.innerHTML += `<span class="warn">${msg}<span><br>`;
  console.info = msg => logElem.innerHTML += `<span class="info">${msg}</span><br>`;

  async function startCapture() {
    logElem.innerHTML = "";

    try {
      videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
      dumpOptionsInfo();
    } catch (err) {
      console.error("Error: " + err);
    }
  }

  function stopCapture(evt) {
    let tracks = videoElem.srcObject.getTracks();

    tracks.forEach(track => track.stop());
    videoElem.srcObject = null;
  }

  function dumpOptionsInfo() {
    const videoTrack = videoElem.srcObject.getVideoTracks()[0];
    console.info("Track settings:");
    console.info(JSON.stringify(videoTrack.getSettings(), null, 2));
    console.info("Track constraints:");
    console.info(JSON.stringify(videoTrack.getConstraints(), null, 2));
  }



  
</script>

</html>